<template>
	<view class="content fofa">
		<tabnav title="角色详情" :col="back"></tabnav>
		<view style="height: 40rpx;"></view>
		<view class="wid90 mar bacFFF borRad20 box1" style="padding: 30rpx 0;">
			<view class="wid90 mar">
				<view class="foSi30">基本信息</view>
				<view class="mar-top20 foSi25 dis disAl">
					<view style="color: #B5B4B4;width: 25%;">角色名称：</view>
					<view style="width: 75%;">{{list.name}}</view>
				</view>
				<view class="mar-top20 foSi25 dis disAl">
					<view style="color: #B5B4B4;width: 25%;">角色类型：</view>
					<view style="width: 75%;">{{list.type}}</view>
				</view>
				<view class="mar-top20 foSi25 dis disAl">
					<view style="color: #B5B4B4;width: 25%;">创建时间：</view>
					<view style="width: 75%;">{{list.time}}</view>
				</view>
				<view class="mar-top20 foSi25 dis disAl">
					<view style="color: #B5B4B4;width: 25%;">角色描述：</view>
					<view style="width: 75%;">{{list.describe}}</view>
				</view>
			</view>
		</view>
		<view class="wid90 mar mar-top30 borRad10 box1 bacFFF">
			<view class="dis disAl disJuB hei80 wid90 mar">
				<view>角色状态</view>
				<view class="dis disAl">
					<view style="color: #B5B4B4;" class="foSi20">角色正常启用</view>
					<switch :checked='list.checked == 1' :color="back" style="transform:scale(0.6)"/>
				</view>
			</view>
		</view>
		<view class="wid90 mar bacFFF borRad20 box1 mar-top30" style="padding: 30rpx 0;">
			<view class="wid90 mar">
				<view class="foSi30">关联权限</view>
				<view class="foSi25 mar-top20" style="color: #B5B4B4;line-height: 41rpx;">{{list.text}}</view>
			</view>
		</view>
		<view class="wid90 mar bacFFF borRad20 box1 mar-top30" style="padding: 30rpx 0;">
			<view class="wid90 mar">
				<view class="foSi30">关联员工</view>
				<view class="dis disAl mar-top30" v-for="(item,index) in list.list" :key="index">
					<image v-if="!item.avater" src="https://www.sign.run/applet/static/role/avater.png" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
					<image v-if="item.avater" :src="item.avater" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
					<view class="foSi25 mar-left20">
						<view>{{item.name}}</view>
						<view class="mar-top20 " style="color: #B5B4B4;">{{item.gs}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tabnav from "../common/tabnav/tabnav.vue"
	export default {
		components: {
			tabnav,
		},
		data() {
			return {
				back: uni.getStorageSync('back'),
				id: '',
				list: {
					name: '超级管理员',
					type: '系统角色',
					time: '2023-12-08 09：00：00',
					describe: '所有功能和数据管理权限',
					checked: 1,
					text: '合同类型管理、合同类型管理、合同类型管理、合同 类型管理、合同类型管理、合同类型管理、合同类型 管理、合同类型管理、合同类型管',
					list: [
						{
							avater: '',
							name: '张三',
							gs: '长春市千羽科技有限公司'
						},
						{
							avater: 'https://img.zcool.cn/community/0104c15cd45b49a80121416816f1ec.jpg@1280w_1l_2o_100sh.jpg',
							name: '李四',
							gs: '长春市千羽科技有限公司'
						}
					]
				}
			}
		},
		onLoad(op) {
			this.id = op.id
		},
		methods: {
			tiaozhuan(url){
				uni.navigateTo({
					url: url
				});
			},
		}
	}
</script>

<style>
	.content {
		height: 100vh;
		background-color: #F4F3F3;
	}
	.foSi28{
		font-size: 28rpx;
	}
	.xia{
		height: 1rpx;
		background: #BFBFBF;
	}
</style>
